<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/lib/iconfont.css">
    <script src="js/lib/vue.min.js"></script>
    <script src="js/base.js" type="text/javascript" charset="utf-8"></script>

    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-family: "Microsoft YaHei UI Light";
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        .all {
            display: flex;
            width: 100%;
            height: 100%;
            position: absolute;
            background: gray;
            opacity: 1;
            top: 0px;
            left: 0px;
            justify-content: center;
            align-items: center;
            display: none;
            z-index: 77;
        }

        .all-a {
            display: flex;
            width: 460px;
            height: 400px;
            background: white;
            flex-direction: column;
            align-items: center;
        }

        .all-b {
            width: 90%;
            height: 30px;
            line-height: 28px;
            vertical-align: middle;
            border: 1px solid #e2e2e2;
            margin: 30px 0px 3px 0px;
            text-align: left;
            border-radius: 4px;
        }

        .all-b > span {
            margin-left: 20px;
        }

        .input {
            background: white;
            width: 150px;
            text-decoration: none;
            border: none;
            outline: none;
            height: 20px;
        }

        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset;
            /*border: 1px solid #CCC!important;*/
        }

        h2 {
            margin-top: 10px;
        }

        .all-b:hover {
            background: #e2e2e2;
        }

        .all-c {
            border: 1px solid #c2c2c2;
            border-radius: 4px;
            background: #ff1d25;
            width: 40px;
            padding: 3px 20px;
            color: white;
        }

        .all-d {
            border: 1px solid #c2c2c2;
            border-radius: 4px;
            background: #eeeeee;
            width: 40px;
            padding: 3px 20px;
            margin-left: 20px;
            color: #333333;
        }

        .all-c:hover, .all-d:hover {
            opacity: 0.8;
        }

        .all-c:active {
            background: #333333;
        }

        .all-d:active {
            background: #79C48C;
        }

        .change {
            display: block;
            width: 100%;
            height: 100%;
            margin-top: 10px;
        }

        .change-1 {
            width: 22%;
            margin-left: 1.5%;
            margin-right: 1.5%;
            background: #c2c2c2;
            height: auto;
            margin-top: 3px;
            position: relative;
        }

        .change-1 > ul {
            height: 100px;
            padding: 5px 0;
        }

        .change-o {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            margin-bottom: 20px;
            align-items: center;
        }

        .change-s {
            width: 100%;
            height: auto;
            display: none;
            flex-wrap: wrap;
            align-items: center;
        }

        li {
            list-style: none;
            margin: 2px 0px;
            width: auto;
            padding: 1px 10px;

        }

        .change-1:hover {
            background: #eeeeee;
        }

        .change-1 > ul > li:hover {

        }

        .query {
            padding: 3px 30px;
            background: #1daaf5;
            text-align: center;
            margin-left: 20px;
            width: 80px;
            border-radius: 4px;
        }

        .query1 {
            padding: 3px 30px;
            background: #1daaf5;
            text-align: center;
            margin-left: 20px;
            width: 80px;
            border-radius: 4px;
        }

        .icon-gou {
            position: absolute;
            font-size: 45px;
            color: #79C48C;
            top: 10px;
            right: 10px;
            display: none;
        }

        .change-2 {
            display: flex;
            justify-content: center;
            width: 100%;
            height: auto;
            align-items: center;
            margin-top: 3px;
            margin-bottom: 20px;
        }

        .change-2 > span {
            margin-top: 20px;
            padding: 3px 10px;
            margin-left: 5px;
            background: #e2e2e2;
            border-radius: 4px;

        }

        .unmber {
            margin-top: 20px;
            padding: 3px 10px;
            margin-left: 5px;
            background: #e2e2e2;
            border-radius: 4px;
        }

        .change-2 > span:hover {
            background: #79C48C;
        }

        .change-2 > span:focus {
            background: #79C48C;
        }

        .change-2 > i {
            margin-top: 20px;
        }

        button {
            border: 0;
            border-radius: 4px;
            padding: 3px 10px;

        }

        .aa {
            background: #1daaf5;
        }

        .fenpei {
            margin-left: 40px;
            font-family: "微软雅黑 Light";
        }

        button:focus {
            background: #79C48C;
            online: none;
        }

        .clasd {
            padding: 3px 10px;
            margin-left: 5px;
            background: #e2e2e2;
            border-radius: 4px;
        }
        .clasd:hover{
            background: #79C48C;
        }

        .tian {
            margin-left: 20px;
            font-family: 微软雅黑;
        }

        .inpu {
            border-radius: 4px;
            margin-left: 5px;
            width: 20px;
            margin-right: 5px;
            font-size: 14px;
        }

        .a:hover {
            background: white;
            color: red;
        }

        .span-a {
            padding: 2px 10px 4px 20px;
            background: #FFB800;
            border-radius: 5px;
            font-size: 14px;
        }

        .span-a:hover {
            opacity: 0.8;
            background: #79C48C;
            color: white;
        }

        .span-a:active {
            background: #ff1d25;
        }

        .query-o {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: -10px;
            opacity: 0.6;
            background: gray;
            display: none;
            z-index: 666;
        }

        .query-s {
            display: block;
            position: absolute;
            left: 500px;
            top: -300px;
            width: auto;
            height: auto;
            background: white;
            z-index: 999;
            transition: 0.5s;
            box-shadow: 0px 0px 10px #e2e2e2;
            align-content: center;
            text-align: center;
        }

        .query-s > h3 {
            margin: 5px 30px;
            padding-top: 10px;
        }

        .query-s > ul > li {
            text-align: left;
            padding: 5px 10px;
        }

        .query-s > ul > li:hover {
            background: #c2c2c2;
        }

        .query-s > ul {
            margin: 20px 20px;
            width: auto;
        }

        .query-s > ul > li > span {
            display: inline-block;
            width: 100px;
            padding: 3px;
            font-family: 微软雅黑;
        }

        #subNo, #unactiveCount, #totalCount, #activeCount {
            margin-left: 40px;
            padding: 2px 10px;
            background: #5FB878;
            border-radius: 5px;
            color: white;
        }
    </style>
</head>
<body style="position: relative">
<div class="query-o">
</div>
<div class="query-s">
    <h3>激活码使用情况</h3>
    <ul>
        <li>
            <span>批次</span>
            <span id="subNo"></span>
        </li>
        <li>
            <span>已使用个数</span>
            <span id="activeCount" style="margin-left: 40px;"></span>
        </li>
        <li>
            <span>未使用个数</span>
            <span id="unactiveCount" style="margin-left: 40px;"></span>
        </li>
        <li>
            <span>总激活码个数</span>
            <span id="totalCount" style="margin-left: 40px;"></span>
        </li>
        <li style="text-align: center;border-radius: 5px;background: #FF5722" onclick="quxiao()">
            <span >取&nbsp;消</span>
        </li>
    </ul>
</div>

<div class="change">
    <div class="change-o">
        <span class="query">查询刷新</span> <span class="query1" style="margin-left: 76px" id="xiugai">分配</span>
        <span> <span class="fenpei"> 用户分配</span>  <button value="1" onclick="dianji(this)">已分配</button> <button
                value="0" onclick="dianji(this)">未分配</button> <button value="2" onclick="dianji(this)">全&nbsp;&nbsp;&nbsp;部</button></span>
    </div>
    <div class="change-s" id="app">
        <div class="change-1" v-for="value in values">
            <ul v-if="value[2]!= 0" style="background: #e2e2e2">
                <li class="a">批次&nbsp;&nbsp;&nbsp;<i>{{value[0]}}</i></li>
                <li class="a">被分配人&nbsp;&nbsp;{{value[1]}}</li>
                <li class="a">被分配人的手机 &nbsp;{{value[2]}}</li>
                <li style="display: block;text-align: center"><span class="span-a" onclick="findCode(this)">查看激活使用情况 <i
                        style="display: none">{{value[0]}}</i></span>
                </li>
            </ul>
            <ul v-else-if="value[2]== 0" onclick="geet(this)">
                <i class="iconfont icon-gou"></i>
                <li class="a">批次&nbsp;&nbsp;&nbsp;<i>{{value[0]}}</i></li>
                <li class="a">被分配人&nbsp;&nbsp;<font color="red">无</font></li>
                <li class="a">被分配人的手机&nbsp;<font color="red">无</font></li>
            </ul>
        </div>
        <div class="change-2">
            <span onclick="fenye(this)">首页</span>
            <span onclick="fenye(this)">上一页</span>
            <i v-if="totalPages < 11">
                <span v-for="n in totalPages">
                     <span onclick="fenye(this)" class="clasd">
                    {{n}}
                    </span>
                </span>
            </i>
            <i v-if="totalPages > 10">
                <span v-for="n in 10">
                     <span onclick="fenye(this)" class="clasd">
                    {{n}}
                    </span>
                </span>
            </i>
            <span onclick="fenye(this)">下一页</span>
            <span onclick="fenye(this)">末页</span>
            <i class="tian">跳转至<input value="" type="text" class="inpu" id="inpu"/>页</i>
            <span onclick="tianzhuan()">跳转</span>
        </div>
    </div>
</div>


<div class="all">
    <div class="all-a">
        <h2>设置激活码</h2>
        <div class="all-b">
            <span style="margin-left: 95px">贴牌号</span>
            <span style="margin-left: 60px">
                <input class="input" type="text" placeholder="请输入贴牌号" size="15px" id="GbrandId">
              </span>
        </div>
        <div class="all-b">
            <span>归属人的手机号码</span>
            <span style="margin-left: 60px">
                <input class="input" type="text" placeholder="请输入归属人的手机号码" size="15px" id="Gphone">
              </span>
        </div>
        <div class="all-b">
            <span style="margin-left: 50px">归属人的姓名</span>
            <span style="margin-left: 60px">
                <input class="input" type="text" placeholder="请输入归属人的姓名" size="15px" id="Gname">
              </span>
        </div>

        <div style="width: 50%;border: 0;margin-top: 40px">
            <span class="all-c" onclick="tijiao()">确&nbsp;定</span>
            <span class="all-d">取&nbsp;消</span>
        </div>
    </div>
</div>
</body>
<script>
    var storage = window.sessionStorage;
    var brandId = sessionStorage.getItem(3)            //获取BrandId


    function findCode(obj) {
        $('.query-o').show();
        $('.query-s').css("top", '100px');
        batchNo = $(obj).children('i').text();
        console.log(batchNo)
        findCo();
    }

    $('.query-o').click(function () {
        $(this).hide();
        $('.query-s').css("top", '-430px')
    })

    //取消激活码使用情况
    function quxiao() {
        $(".query-o").hide();
        $('.query-s').css("top", '-430px')
    }


    //获取批次激活码使用情况
    function findCo() {
        $.ajax({
            url: window.baseUrl+"paymentchannel/pass/verification/query/batchno/count",
            type: "POST",
            dataType: "json",
            data: {
                brandId: brandId,
                batchNo: batchNo,
            },
            success: function (data) {
                console.log("成功接收数据 ");
                console.log(data)
                $("#subNo").html(batchNo);
                $("#unactiveCount").html(data.unactiveCount);
                $("#activeCount").html(data.activeCount);
                $("#totalCount").html(data.totalCount)
            },
            error: function () {
                alert("获取信息失败！")
            }
        });
    }

    function tianzhuan() {
        var val = $("#inpu").val();
        page = parseInt(val) - 1;
        if (val.length == 0) {
            alert("跳转页面为空")
        } else if (val > totalPages) {
            alert("超出实际页")
        } else {
            vb.all();
        }
    }

    //用户分配
    function dianji(obj) {
        var value = $(obj).val();
        dependenceStatus = value;
        page = 0;
        console.log(dependenceStatus);
        vb.all();
    }


    //弹出修改窗
    $(".all-d").click(function () {
        $(".all").hide();
    });
    $("#xiugai").click(function () {
        if (nums.length == 0) {
            alert("请选择你想要选择的批次！")
        } else {
            $(".all").css("display", "flex");
            $("#GbrandId").val(brandId);
        }
    });

    function fenye(obj) {
        var text = $(obj).html();
        page = number;
        if (text == "首页") {
            page = 0;
            vb.all();
        } else if (text == "上一页") {
            if (page != 0) {
                page = parseInt(page) - 1;
                vb.all();
            } else {
            }
        } else if (text == "下一页") {
            if (page == totalPages || totalPages == 1) {

            } else {
                page = parseInt(page) + 1;
                console.log(page)
                vb.all();
            }
        } else if (text == "末页") {
            page = parseInt(totalPages) - 1;
            vb.all();
        } else {
            page = parseInt(text) - 1;
            vb.all();
        }
    }


    //选择修改的批次
    var num = new Array();
    var nums = "";
    function geet(obj) {
        var p = $(obj).children("li").eq(0).children("i").text();
        var t = p + ",";
        if ($(obj).hasClass('open')) {
            $(obj).removeClass('open');
            $(obj).children('i').hide();
            $(obj).parent().css("background", "#c2c2c2");
            num = nums.split(t);
            nums = num.toString(num);
        } else {
            nums = nums + t;
            $(obj).addClass("open");
            $(obj).children('i').css("display", "block");
            $(obj).parent().css("background", "#eeeeee");
        }
    }


    //获取后台的批次信息
    var number;
    var numberOfElements;
    var totalElements;
    var totalPages;
    var page = number;
    var dependenceStatus;

    //查询自动返利的内容
    $(".query").click(function () {
        vb.all();
    })
    function tijiao() {
        var Gphone = $("#Gphone").val();
        var Gname = $("#Gname").val();
        var GdrandId = $("#GbrandId").val();
        nums = nums.substring(0, (nums.length - 1));
        if (Gphone.length == 0 || GdrandId.length == 0) {
            alert("贴牌号和手机号必填")
        } else {
            $.ajax({
                url: window.baseUrl+"paymentchannel/pass/verification/set/dependence",
                type: "POST",
                data: {
                    brandId: GdrandId,
                    dependencePhone: Gphone,
                    dependenceName: Gname,
                    batchNos: nums
                },
                success: function (data) {
                    console.log("成功接收数据 ..... ");
                    console.log(data)
                    $(".all").hide();
                    $(".icon-gou").hide();
                    vb.all();
                },
                error: function () {
                    alert("获取信息失败！")
                }
            });
        }
    }
    //刷新
    function shuaxin() {
        window.location.reload(true);
    }

    var batchNo; //批次号


    var vb = new Vue({
        el: "#app",
        data: {
            values: [],
        },
        methods: {
            all: function () {
                var self = this;
                $.ajax({
                    url: window.baseUrl+"paymentchannel/pass/verification/query/batchno/dependence",
                    type: "POST",
                    data: {
                        brandId: brandId,
                        page: page,
                        dependenceStatus: dependenceStatus,
                        size:40
                    },
                    success: function (data) {
                        console.log("成功接收数据 ");
                        console.log(data);
                        var vode;
                        vode = data.result.content;
                        vode = vode.sort(function (a,b) {
                            return a[0] - b[0];
                        });
                        console.log(vode)
                        self.values = vode;
                        number = data.result.number;  //获取的当前页加一
                        numberOfElements = data.result.numberOfElements; //一页的数量
                        totalElements = data.result.totalElements;//总数量
                        totalPages = data.result.totalPages; //总页数
                        $(".change-s").css("display", "flex");
                    },
                    error: function () {
                        alert("获取信息失败！")
                    }
                })
            }
        }
    })
    vb.all();
</script>
</html>